<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录界面
    </title>
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/axios-0.18.0.js"></script>
    <style>
        .text {
            font-size: 14px;
        }

        .item {
            padding: 18px 0;
        }

        .box-card {
            width: 440px;
        }
    </style>
</head>
<body>
<div id="app" align="center">
    <el-card class="box-card">
        <span style="color:#37B328" style="size: A3 ">基于SpringMVC实现的学生成绩管理系统（登录页面）</span>
        <br><br>
        <div v-for="o in 1" :key="o" class="text item">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户账号: ">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
            </el-form>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户密码: ">
                    <el-input type="password" v-model="form.pwd"></el-input>
                </el-form-item>
                <br>
                <template align="left">
                    <span>账号类型: </span>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-radio v-model="form.states" label="0">学生</el-radio>
                    &nbsp;&nbsp;
                    <el-radio v-model="form.states" label="1">教师</el-radio>
                    &nbsp;&nbsp;
                    <el-radio v-model="form.states" label="3">管理员</el-radio>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                </template>

            </el-form>
            <el-form>
                <el-form-item>
                    <span></span><br><br>
                    <el-row>
                        <el-button type="primary" @click="onSubmit">立即登录</el-button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <el-button type="danger" @click="resetForm()">重置</el-button>
                    </el-row>
                </el-form-item>
            </el-form>
        </div>
    </el-card>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            form: {
                name: '57842216894',
                pwd: '123456789',
                states: '1'
            }
        },
        methods: {
            onSubmit() {
                console.log('submit!');
                axios.post("/login", this.form).then(resp => {
                    console.log(resp);
                    if (resp.data.data === 111) {
                        window.requestAnimationFrame(() => {
                            sessionStorage.setItem("username", this.form.name)
                            sessionStorage.setItem("pwd", this.form.pwd)
                            sessionStorage.setItem("states", this.form.states)
                            window.location.href = '/page/student/success.html'
                        })
                    }
                    if (resp.data.data === 222) {
                        window.requestAnimationFrame(() => {
                            sessionStorage.setItem("username", this.form.name)
                            sessionStorage.setItem("pwd", this.form.pwd)
                            window.location.href = '/page/teacher/homepage.html'
                        })
                    }
                    if (resp.data.data === 333) {
                        window.requestAnimationFrame(() => {
                            sessionStorage.setItem("username", this.form.name)
                            sessionStorage.setItem("pwd", this.form.pwd)
                            window.location.href = '/page/admin/homepage.html'
                        })
                    } else {
                        this.$notify({type: 'warning', message: resp.data.msg});
                    }

                })
            },
            resetForm() {
                this.form.name = '';
                this.form.pwd = '';
            },
        }
    });
</script>
</body>
</html>
